import React from 'react'
// 4. 导入路由器和路由组件
import { Routes, Route, NavLink, Link,Navigate } from 'react-router-dom'
import Index from './pages/Index'
import Login from './pages/Login'
import Users from './pages/Users'
// 导入css样式
import './App.css'
import PageNotFound from './pages/PageNotFound'
export default function App() {
    return (
        <div>
            <h3>App</h3>
            {/* <ul>
                <li><a href="/enter">首页</a></li>
                <li><a href="/login">登录</a></li>
                <li><a href="/users">用户列表</a></li>
            </ul> */}
            <h3>NavLink</h3>
            <ul>
                {/* isActive是一个布尔值，如果是激活状态就是true，否则是false */}
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/enter'>首页</NavLink></li>
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/login'>登录页</NavLink></li>
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/users'>用户页</NavLink></li>
            </ul>
            <h3>Link</h3>
            <ul>
                <li><Link to='/enter'>首页</Link></li>
                <li><Link to='/login'>登录页</Link></li>
                <li><Link to='/users'>用户页</Link></li>
            </ul>

            {/* 5. 配置路由 path 路径 - element 路由组件 */}
            <Routes>
                <Route path='/enter' element={<Index />}></Route>
                <Route path='/login' element={<Login />}></Route>
                <Route path='/users' element={<Users />}></Route>
                {/* 重定向的三种写法 */}
                {/* <Route path='/' element={<Navigate to='/enter'/>}></Route> */}
                {/* <Route index={true} element={<Navigate to='/enter'/>}></Route> */}
                <Route index element={<Navigate to='/enter'/>}></Route>
                {/* 404页面 */}
                <Route path='*' element={<PageNotFound/>} ></Route>
            </Routes>
        </div>
    )
}
